{% extends "template.html" %}

{% block js %}
<script type="text/javascript">
    $(document).ready(function() {
        $("form#Policy").validate();
    });
</script>
{% endblock js %}

{% block left %}
<strong>Plot: {{plot.plotName}} </strong><br/><br/>

<form id="Policy" action="{% url AddPolicy %}" enctype="multipart/form-data" method="post">
    
    <div><label>Select House Type</label>: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="houseTypeKey" class="required">
            <option value="">  Select One</option>
            {% for type in houseTypes %}
            <option value="{{type.key}}">{{type.houseType}}</option>
            {% endfor %}
        </select></div><br/>
        <div><label>Monthly Rent(Ksh):</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="rent"  class="required" size="5"  /></div><br/>
        <div><label>Penalty Rate % (optional):</label>&nbsp;<input type="text" name="penaltyRate" size="5" /></div><br/>
    <div><label>Pay Deadline(optional): </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select  name="payDeadline">
            <option value="1">1st</option>
            <option value="2">2nd</option>
            <option value="3">3rd</option>
            <option value="4">4th</option>
            <option value="5">5th</option>
            <option value="6">6th</option>
            <option value="7">7th</option>
            <option value="8">8th</option>
            <option value="9">9th</option>
            <option value="10">10th</option>
        </select></div><br/>
    <div><label>Deposit Required(optional)</label>&nbsp;&nbsp;<select  name="depositRequired">
            <option value="1">1 Month</option>
            <option value="2">2 Months</option>
            <option value="3">3 Months</option>
            <option value="4">4 Months</option>
            <option value="5">5 Months</option>
            <option value="6">6 Months</option>
        </select></div><br/>
    <div><label>Notice Required(optional)</label>&nbsp;&nbsp;&nbsp;&nbsp;<select  name="noticeRequired">
            <option value="1">1 Month</option>
            <option value="2">2 Months</option>
            <option value="3">3 Months</option>
            <option value="4">4 Months</option>
            <option value="5">5 Months</option>
            <option value="6">6 Months</option>
        </select></div><br/>
    <input type="hidden" name="plotKey" value="{{plot.key}}"/>
        <div><input type="submit" value="Save" style="width: 50px;"/></div><br/>
</form>


{% endblock left %}

{% block right %}
<h2>Policy</h2>
<table>
    <tr>
        <th>House Type</th>
        <th>Rent</th>
        <th>Pay Deadline</th>
        <th>Deposit</th>
        <th>Notice</th>
        <th>Penalty</th>
    </tr>
    {% for pol in policy %}
    <tr>
        <td>{{pol.houseType.houseType}}</td>
        <td>Ksh {{pol.rent}}</td>
        <td>Day {{pol.payDeadline}}</td>
        <td>{{pol.depositRequired}} months</td>
        <td>{{pol.noticeRequired}} months</td>
        <td>{{pol.penaltyRate}} &#37</td>
    </tr>
    {% endfor %}
</table>
{% endblock right%}